<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*从整体到局部*/
        /*去掉所有的内外边距*/
        *{
            margin: 0;
            padding: 0;
        }
        /*由外到内*/
        /*背景*/
        body{
            background: #cdcdcd;
        }
        /*外层盒子*/
        div{
            width: 230px;
        }
        /*同级,由上到下*/
        h3{
            height: 35px;
            line-height: 35px;/*行高,和高度一样,垂直居中*/
            background: black;
            color: white;
            padding-left: 25px;/*向左内推开*/
        }
        /*背景颜色*/
        dl{
            background: white;
        }
        dt{
            height: 30px;
            line-height: 30px;
            background: url("icon_01.gif") 0px 0px no-repeat;/*背景图片*/
            padding-left: 30px;/*向左内推开*/
            font-weight: bolder;/*字体粗细*/
            font-size: 14px;
        }
        dd{
            padding-left: 30px;
            font-size: 12px;
            line-height: 23px;
            color: #8b8b8b;
            border-bottom: 2px dotted #8b8b8b;/*下边框*/
        }
    </style>
</head>
<body>
<!--外层div-->
<div>
    <h3>全部分类</h3>
    <dl>
        <dt>护肤</dt>
        <dd>洁面 化妆水 喷雾 美容液 眼霜 <br>
            眼部精华 眼膜 面膜 面膜贴 <br>
            水洗面膜 免洗面膜 精华 精油 <br>
            凝露 乳液 面霜 日霜 晚霜</dd>
        <dt>彩妆</dt>
        <dd>卸妆 防晒 隔离 BB霜 粉底 粉饼
            睫毛膏 眼影 唇彩 腮红 眼线笔
            底妆 遮瑕 蜜粉 眉笔 美甲</dd>
        <dt>香氛</dt>
        <dd>男香 女香 小Q装 中性香水</dd>
    </dl>
</div>
</body>
</html>